import styles from "../styles/Components.module.css";
import ReactECharts from "echarts-for-react";

type ParamProp = {
  name: string;
  value: string | number;
};
function Param({ name, value }: ParamProp) {
  return (
    <div className={styles.paramBody}>
      <div className={styles.paramName}>{name}</div>
      <div className={styles.paramValue}>{value}</div>
    </div>
  );
}

type CardProp = {
  title: string;
  children: React.ReactNode;
};

function Card({ title, children }: CardProp) {
  return (
    <div className={styles.card}>
      <div className={styles.cardTitle}>{title}</div>
      <div className={styles.cardBody}>{children}</div>
    </div>
  );
}

type PercentProp = {
  title: string;
  value: number;
};
function Percent({ title, value }: PercentProp) {
  const option = {
    title: {
      text: `${value}%`,
      left: "center",
      top: "center",
      textStyle: {
        color: "#fff",
        fontWeight: "bold",
        fontSize: 20,
      },
    },
    series: [
      {
        name: title,
        type: "pie",
        radius: ["76%", "90%"],
        avoidLabelOverlap: false,
        padAngle: 6,
        animation: false,
        hoverAnimation: false,
        itemStyle: {
          borderRadius: 4,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 100 - value,
            name: "secondary",
            itemStyle: {
              color: "#f6fffc",
              shadowColor: "rgba(210, 255, 239, 0.6)",
              shadowBlur: 7,
            },
          },
          {
            value: value,
            name: "primary",
            itemStyle: {
              color: "#f5e74f",
              shadowColor: "rgba(245, 231, 79, 0.6)",
              shadowBlur: 7,
            },
          },
        ],
      },
    ],
  };
  return (
    <div className={styles.percent}>
      <ReactECharts className={styles.percentBody} option={option} />
      <div className={styles.percentTitle}>{title}</div>
    </div>
  );
}

export { Param, Card, Percent };
